<template>
  <div class="main">
    <div class="block">
      <!-- <span class="demonstration">Click 指示器触发</span> -->
      <el-carousel trigger="click" height="420px" :interval="3000">
        <el-carousel-item v-for="item in banners" :key="item.bannerId">
          <img :src="item.pic" alt="" width="100%">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--推荐歌单  -->
    <div class="song-list">
      <div class="row-title">
        <div class="theme">{{ $t('home.recommendPlaylist') }}</div>
        <a class="Viewall">查看全部</a>
      </div>
      <div>
        <el-row :gutter="20" class="row-content">
          <el-col v-for="obj in result" :key="obj.id" class="lst" :span="6">
            <div class="image">
              <img :src="obj.picUrl" alt="" width="100%">
              <button class="bf bfgd" @click="getRecommendedSongs(obj.id)"><span class="iconfont icon-play" /></button>
            </div>
            <div>
              <a href="" class="introduce">{{ obj.name }}</a>
            </div>
            <div>
              <span class="copywriter">{{ obj.copywriter }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- Foryou -->
    <div class="Foryou">
      <div class="theme" @click="newsong('33894312')">For you</div>
      <el-row type="flex" justify=" space-between ">
        <el-col class="recomday" :span="12">
          <img :src="list[0]&&list[0].picUrl" width="100%" alt="" class="recomdayImg">
          <div class="recom">每日推荐</div>
          <button class="bftj"><span class="iconfont icon-play" /></button>
        </el-col>
        <el-col class="Fm" :span="12">
          <div class="FmImg"><img :src="songs.album&&songs.album.blurPicUrl" width="100%" alt=""></div>
          <div class="songname">{{ songs.album&&songs.album.name }}</div>
          <a href="">{{ songs.artists&&songs.artists[0].name }}</a>
          <div class="Iconbtn">
            <span class="iconfont icon-ungood-b" />
            <span class="iconfont icon-play" />
            <span class="iconfont icon-xiayishou" />
          </div>
          <div class="textFm"><span class="iconfont icon-shouyinji" /> 私人FM</div>
        </el-col>
      </el-row>
    </div>
    <!-- 推荐艺人 -->
    <div class="artist">
      <div class="theme" style="margin-top: 30px;">{{ $t('home.recommendArtist') }}</div>
      <div class="artists">
        <div v-for="item in shade" :key="item.id">
          <div class="shade" @click="Singer(item.id)">
            <img :src="item.picUrl" alt="">
            <button class="bf bfshade"><span class="iconfont icon-play" /></button>
          </div>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <!-- 新专辑 -->
    <div class="Album">
      <div class="row-title">
        <div class="theme">{{ $t('home.newAlbum') }}</div>
        <a class="Viewall">查看全部</a>
      </div>
      <div>
        <el-row :gutter="20" class="row-content">
          <el-col v-for="obj in Album" :key="obj.id" class="lst" :span="6">
            <div class="image">
              <img :src="obj.picUrl" alt="" width="100%">
              <button class="bf bfgd"><span class="iconfont icon-play" /></button>
            </div>
            <div>
              <a href="" class="introduce">{{ obj.name }}</a>
            </div>
            <div class="copywriterAlbum">
              <span v-for="item in obj.artists" :key="item.id" class="copywriter">{{ item.name }} </span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 排行榜 -->
    <div class="Ranking">
      <div class="row-title">
        <div class="theme">{{ $t('home.charts') }}</div>
        <a class="Viewall">查看全部</a>
      </div>
      <div>
        <el-row :gutter="20" class="row-content">
          <el-col v-for="obj in Ranking" :key="obj.id" class="lst" :span="6">
            <div class="image">
              <img :src="obj.coverImgUrl" alt="" width="100%">
              <button class="bf bfgd"><span class="iconfont icon-play" /></button>
            </div>
            <div>
              <a href="" class="introduce">{{ obj.name }}</a>
            </div>
            <div class="copywriterAlbum">
              <span class="copywriter">{{ obj.updateFrequency }} </span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import Utils from '../../assets/js/u.js'
import { getHomepageRotation, getRecommendedSong, getpersonalFm, getPopularsinger, getNewAlbum, getRankingList, getRecommendSongs, getRecommendedSongs } from '@/api/Hompage' // getRecommendSongs,
export default {
  data() {
    return {
      banners: [], // 轮播图
      result: [], // 推荐歌单
      list: [],
      songs: [],
      shade: [], // 热门歌手
      Album: [],
      Ranking: [],
      a: null
    }
  },
  created() {
    this.getHomepageRotation()
    this.getRecommendedSong()
    this.getRecommendSong()
    this.getpersonalFm()
    this.getPopularsinger()
    this.getNewAlbum()
    this.getRankingList()
  },
  methods: {
    newsong(id) {
      Utils.$emit('demo', id)
    },
    Singer(id) {
      this.$router.push({
        path: `/singer/${id}`
      })
    },
    functionA(id) {
      Utils.$emit('demo', id)
    },
    async getHomepageRotation() {
      const { data: { data: { blocks }}} = await getHomepageRotation()
      // console.log(blocks)
      // console.log(blocks[0].extInfo.banners)
      this.banners = blocks[0].extInfo.banners
    },
    async getRecommendedSong() {
      const { data } = await getRecommendedSong()
      this.result = data.result
      console.log(this.result)
    },
    async getRecommendSong() {
      const { data } = await getRecommendSongs()
      // console.log(data.result)
      this.list = data.result

      // getRecommendedSongs
    },
    async getpersonalFm() {
      const { data } = await getpersonalFm()
      // console.log(data.data[0])
      this.songs = data.data[0]
    },
    async getPopularsinger() {
      const { data } = await getPopularsinger()
      this.shade = data.artists
      // console.log(this.shade)
    },
    async getNewAlbum() {
      const { data } = await getNewAlbum()
      this.Album = data.albums
      // console.log(this.Album)
    },
    async getRankingList() {
      const { data } = await getRankingList()
      // console.log(data.list)
      for (let i = 0; i < 4; i++) {
        this.Ranking.push(data.list[i])
      }
    // console.log(this.Ranking)
    },
    async getRecommendedSongs(id) {
      const { data } = await getRecommendedSongs(id)
      console.log(data)
      const msg = data.playlist.trackIds[0].id
      console.log(msg)
      this.functionA(msg)
    }

  }
}
</script>

<style  lang='less' scoped>
.main{
  .iconfont:hover{
    cursor: pointer;
  }
  margin-top: 54px;
   .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .row-title{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    .Viewall{
      font-size: 14px;
      padding-top: 22px;
      box-sizing: border-box;
    }
  }
  .theme{
      font-size: 30px;
      font-weight: 700;
      margin-bottom:20px ;
    }
  .Viewall:hover{
        text-decoration:underline;
        cursor: pointer;
      }
    img{
      border-radius: 10px;
    }
    .lst{
      height: 350px;
    }
    .introduce{
      font-size: 16px;
      font-weight: 700;
      color: #2c3e50;
      text-decoration: none;
    }
     .introduce:hover{
        text-decoration: underline;
      }
      .copywriter{
        font-size: 12px;
        color: #7a7a7b;
      }
      .image{
        position: relative;
      }
      .image:hover{
        cursor: pointer;
      }
      .image:hover .bfgd{
        display:block;
      }
      .bf{
        width: 50px;
        height: 50px;
        background-color:rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(4px);
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        border: none;
       }
       .bfgd{
        display:none;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
       }
      .icon-play,.icon-ungood-b,.icon-xiayishou{
        font-size: 30px;
        color: whitesmoke;
      }
      .recomday{
        position: relative;
        width: 100%;
        height: 200px;
        position: relative;
        // background-color: #666;
        border-radius: 10px;
        margin-right:10px ;
        box-sizing: border-box;
        overflow: hidden;
        .bftj{
          display: block;
          position: absolute;
          bottom: 30px;
          right: 30px;
          width: 50px;
          height: 50px;
          background-color:rgba(255, 255, 255, 0.2);
          backdrop-filter: blur(4px);
          aspect-ratio: 1 / 1;
          border-radius: 50%;
          border: none;
        }
      }
      .recom{
        position: absolute;
        top: 20px;
        left: 30px;
        width: 150px;
        height: 150px;
        font-size: 60px;
        font-weight: 700;
        color: whitesmoke;
      }
      .Fm{
        position: relative;
        width: 100%;
        height: 200px;
        background-color: #666;
        margin-left:10px ;
        border-radius: 10px;
        box-sizing: border-box;
        a{
          position: absolute;
          text-decoration: none;
          color: #fff;
          left: 200px;
          top: 65px;
        }
        .Iconbtn{

          position: absolute;
          left: 200px;
          bottom:22px;
          span{
            margin-left:10px ;
          }
        }
        .textFm{
          position: absolute;
          bottom:22px;
          right: 20px;
          color: #7a7a7b;
          font-weight: 700;
        }
      }
      .FmImg{
        position: absolute;
        top: 22px;
        left: 22px;
        width: 166px;
        height: 166px;
        background-color: antiquewhite;
        border-radius: 5px;
      }
      .songname{
        position: absolute;
        top: 22px;
        left:200px;
        font-size:25px;
        font-weight: 700;
        color: aliceblue;
      }
      .artists{
        display: flex;
        justify-content: space-around;
        .shade{
          width: 200px;
          // height: 200px;
          border-radius: 50%;
          // background-color: #666;
          position: relative;
          .bfshade{
            position: absolute;
            display: none;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
          }
          img {
            width: 100%;
            height: 200px;
            border-radius:50% ;
          }
        }
         .shade:hover .bfshade{
            display: block;
          }
      }
      p{
        text-align: center;
        font-size: 16px;
        font-weight: 700;
      }
      .copywriterAlbum{
        width: 100%;
        height: 21px;

      }
      .recomdayImg{
        animation: person-slow 30s infinite ;
      }

}
.keyframes (@name, @frames) {
  @-webkit-keyframes @name { @frames(); }
  @-moz-keyframes @name { @frames(); }
  @-ms-keyframes @name { @frames();}
  @-o-keyframes @name { @frames(); }
  @keyframes @name { @frames(); }
}
.keyframes (person-slow, {
  0% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(-332px);
  }
  60% {
    transform: translateY(-332px);
  }
  100% {
    transform: translateY(0px);
  }
});
</style>
